<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>公司分布图</title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #locationMap {
            height: 100%;
            width: 100%
        }
    </style>

</head>
<body>
<div id="locationMap"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=4BgP01hEXxgq0mqePscL8TrEYQc5DYwi"></script>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    // 初始化地图
    // 初始化地图容器,必须在css样式中设置地图容器的高度和宽度,否则地图无法显示
    var map = new BMap.Map("locationMap");
    // 设置地图的中心点
    var point = new BMap.Point(118.782085,32.016077);
    // 设置 中心点坐标 和 地图级别(地图显示的大小)
    map.centerAndZoom(point, 12);
    // 设置地图显示的城市(地图上看不出什么效果)
    map.setCurrentCity("南京");
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    /*
        {
        "data":
            [
                {"id":1,"latitude":"32.047056","location":"南京市秦淮区新街口","longitude":"118.790227"},
                {"id":2,"latitude":"31.972794","location":"南京市建邺区油坊桥","longitude":"118.729169"}
             ],
        "flag":true,
        "message":"获取体检中心列表数据成功"
        }
    */

    // 在地图上显示体检中心的位置 数据内容: 体检中心地址名称和经纬度位置

    // 定义一个方法在地图上添加指定的点
    function addMarker(x, y) {
        // 根据指定的x,y创建标注对象
        var marker = new BMap.Marker(new BMap.Point(x, y));
        // 在地图上显示该标注
        map.addOverlay(marker);
        return marker;
    }

    // 发送 ajax 请求 获取 体检中心 位置列表
    axios.get("/location/findAllLocations.do").then((resp) => {

        var location_data = resp.data.data;
        for (var i = 0; i < location_data.length; i++) {
            // 调用方法在地图上显示
            var marker = addMarker(location_data[i].longitude, location_data[i].latitude);
            // 创建文本标注对象(参数1,参数2) 参数1:文本信息 参数2:设置文本偏移量(即相对于地图的偏移位置)
            var label = new BMap.Label(location_data[i].location, {offset: new BMap.Size(20, -10)});
            // 设置标注的文本标签
            marker.setLabel(label);
        }
    });
</script>
</body>
</html>